Repository navigation
Switch between phone and wide layouts by window size on iOS (iPhone Duo) - #1745
Merged
Merged
Conversation
The iPhone and iPad app now pick the layout from the window size (at least 680x500 points for the wide layout, roughly iOS regular size classes) instead of the user agent, and switch live when the window crosses that line, such as when an iPhone Duo opens or closes or an iPad enters Split View. Index saves the dock layout, drops the shell for one render so the old dock is disposed, and rebuilds it in the new layout. Other hosts keep the startup check. The iOS shell also stays inside the left and right safe areas, which keeps it clear of the iPhone Duo status bar rail and the camera housing in landscape. Index now implements IDisposable so its event subscriptions are removed.
Deploying valour-marketing with
|
| Latest commit: |
811085e
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://17cb4351.valour-marketing.pages.dev |
| Branch Preview URL: | https://feature-adaptive-layout.valour-marketing.pages.dev |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Stacked on #1743, which has the iOS scene life cycle fix the app needs to launch with the iOS 27 SDK.
The iPhone and iPad app now choose between the phone and wide layouts from the window size instead of the user agent. The wide layout needs at least 680×500 points, which roughly matches iOS regular width and height size classes. The app switches live when the window crosses that line, such as when an iPhone Duo opens or closes or an iPad enters Split View or Stage Manager. Browsers, desktop and Android keep the startup check.
How the switch works:
valourLayoutinmain.jswatches a media query and reports a change after 250 ms, so the fold animation doesn't flip-flop.DeviceInfo.SetMobileLayoutraisesLayoutModeChanged.Indexsaves the dock layout, removes the shell for one render so the old dock is disposed before the new one registers as the main dock, and renders it again. The existing restore code rebuilds the windows; the phone layout keeps only the focused tab. The launch route isn't reopened. Components keep readingDeviceInfo.IsMobilewhen they are created.The iOS shell also stays inside the left and right safe areas. Folded, the Duo moves the status bar into an 84pt rail on the right edge (WebKit reports it as
safe-area-inset-right), and the top bar was drawing under it. The same padding covers the camera housing on iPhones in landscape.Indexnow implementsIDisposable. It had aDisposemethod that Blazor never called, so its event subscriptions leaked.Tested on the iPhone Duo simulator (Xcode 27.1, iOS 27.1) against a local server, with a temporary probe that reported window size, insets and layout:
Not tested: iPad Split View, and an iPhone in landscape (it should stay on the phone layout, since its height is under 500 pt).